<template>
  <div class="container">
    <!-- 一级标题 -->
    <div class="shibie">
      <div class="shibie_title">技术：数据分类分级</div>

    </div>
    <!-- 二级标题 -->
    <div class="shibie2">
      <el-table :data="tableData" border style="width: 95%; margin-left: 30px">
        <el-table-column prop="title" label="标题" width="100"></el-table-column>
        <el-table-column prop="basis" label="基本概念" width="620"></el-table-column>
        <el-table-column label="主要实现" v-slot="{ row }">
          <div v-if="row.main" v-html="row.main"></div>
        </el-table-column>
      </el-table>


    </div>

    <!-- 扩展技术 -->
    <div class="technical-expansion">
      <h2 style="padding: 10px; margin: 20px">扩展技术</h2>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer1 = true"
        >
          自动化工具
        </span>
        <el-drawer v-model="drawer1" title="自动化工具" :with-header="false">
          <div style="margin-top: 20px">
            <h5 style="display: block; margin-top: 10px;">基本概念</h5>
            <span style="display: block; text-indent: 2em;">自动化工具，是指数据分类分级场景下的自动化处理的工具。自动化工具主
                要指基于数据分类分级方面的基本准则和技术，进行自动化的识别、分类以及定
                级的过程。自动化工具适合大量数据的分类分级处理。</span>
            <h5 style="display: block; margin-top: 10px;">主要实现</h5>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 自动化数据分类分级平台</b></span>
            <span style="display: block; text-indent: 2em;">通过自动化技术，将分类分级的专家经验和方法固化为规则模型和识别引
                  擎，有效避免采用全人工进行数据分类分级时存在的因人员经验背景知识不
                  足导致的不确定性问题，降低人力成本。同时，在具体实施过程中根据不同
                  场景，可与数据资产管理系统、传统数据库、大数据库等进行对接，还可根
                  据不同行业选择不同的识别引擎，通过识别关键要素，结合分类分级的规则
                  进行自动化分类分级。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 自动化数据分类分级打标</b></span>
            <span style="display: block; text-indent: 2em;">通过对数据打标签的方式降低数据安全管理的门槛，帮助企业进行数据的分
              类管理，分级防护。目前，业内的专用工具可基于关联补齐后的数据，结合
              数据分类分级结果，在原数据基础上进行标记。
              [28][29][30]</span>
          </div>

        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer2 = true"
        >
          人工辅助
        </span>
        <el-drawer
            class="drawer"
            v-model="drawer2"
            title="人工辅助"
            :with-header="false"
        >
          <div style="margin-top: 20px">
            <h5 style="display: block; margin-top: 10px;">基本概念</h5>
            <span style="display: block; text-indent: 2em;">人工辅助，指数据分类分级场景下的人工辅助系统。人工辅助系统主要指人
                工建立的、预定用来求解数据分类分级问题的系统，能够为决策人提供帮助和支
                持。该系统可以对信息进行检索、处理和存储，能在分类分级的每个阶段提供精
                确且高效的服务。</span>
            <h5 style="display: block; margin-top: 10px;">主要实现</h5>
            <span style="display: block; text-indent: 2em;">人工辅助的主要实现方式为通过人工检查的方式，定期回顾数据打标签的正
              确性、敏感数据的存储使用状态等。</span>
          </div>


        </el-drawer>
      </div>
    </div>
    <!-- 评论区 -->
    <div class="comments-section">
      <h3>评论区</h3>
      <div v-for="item in comments" :key="item.id" class="comment-item">
        <div>
          <strong>{{ item.username }}:</strong> <span>{{ item.content }}</span>
        </div>
        <span
            style="color: red; cursor: pointer"
            v-if="item.username === commentForm.username"
            @click="del(item.id)"
        >删除</span
        >
      </div>
      <div>
        <el-input
            class="comment-input"
            type="textarea"
            v-model="commentForm.content"
            placeholder="请输入评论内容"
        ></el-input>
      </div>
      <el-button class="comment-button" type="primary" @click="comment"
      >评论</el-button
      >

      <el-message
          v-if="errorMessage"
          :type="'error'"
          :message="errorMessage"
      ></el-message>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import { ref } from "vue";
const drawer = ref(false);

export default {
  data() {
    return {
      tableData: [
        {
          title: "数据资产处理（分析）",
          content:
              "",
          basis:
              "数据分类分级需要分两个步骤来开展。数据分类指根据组织数据的属性或特\n" +
              "征，将其按照一定的原则和方法进行区分和分类，并建立起一定的分类体系和排\n" +
              "列顺序，以便更好地管理和使用组织数据的过程。数据分级指按照一定的分级原\n" +
              "则对分类后的数据进行定级，从而为数据的开放和共享安全策略提供支撑。",
          main:
              "<span style=\"display: block; text-indent: 2em;\">数据分类分级主要实现方式为依据标签库、关键词、正则表达式、自然语言\n" +
              "处理、数据挖掘、机器学习等内容识别技术，进行数据分类，根据数据分类的结\n" +
              "果，依据标签进行敏感数据的划分，最终实现数据分级的效果。数据分类分级技\n" +
              "术按元数据类型可分为：</span>\n" +
              "<span style=\"display: block; text-indent: 2em;margin: 10px;\"><b>内容感知分类技术</b></span>\n" +
              "<span style=\"display: block; text-indent: 2em;\">对非结构化数据内容的自动分析来确定分类，涉及正则表达式、完全匹配、\n" +
              "部分或完整指纹识别、机器学习等。</span>\n" +
              "<span style=\"display: block; text-indent: 2em;margin: 10px;\"><b>情境感知分类技术</b></span>\n" +
              "<span style=\"display: block; text-indent: 2em;\">基于数据特定属性类型，利用广泛上下文属性，适用于静态数据（如基于存\n" +
              "储路径或其他文件元数据）、使用中的数据（如由 CAD 应用程序创建的数据）\n" +
              "和传输中的数据（基于 IP）。\n" +
              "按实际应用场景分类技术：</span>\n" +
              "<span style=\"display: block; text-indent: 2em;margin: 10px;\"><b>根据分类分级规则</b></span>\n" +
              "<span style=\"display: block; text-indent: 2em;\">建立标签库，利用机器学习算法经过训练形成分类器，利用分类器将生成的\n" +
              "分类器应用在有待分类的文档集合中，获取文档的分类结果，并可进行自动\n" +
              "化打标。[27]</span>",
        },

      ],
      comments: [],
      pageId: 5,
      commentForm: {
        content: "",
        username: "", // 用户名会在 mounted 生命周期钩子中生成
        userId: "", // 用户 ID 会在 mounted 生命周期钩子中生成
      },
      errorMessage: "",
      drawer1: false,
      drawer2: false,
      drawer3: false,
    };
  },
  methods: {
    generateUserId() {
      // 生成唯一用户ID，例如使用随机数或UUID
      return "user_" + Math.random().toString(36).substr(2, 9);
    },
    generateUsername() {
      // 生成自动用户名，例如基于时间戳或随机字符串
      return "User_" + Math.random().toString(36).substr(2, 5);
    },
    del(commentId) {
      // 获取要删除的评论
      const comment = this.comments.find((c) => c.id === commentId);

      if (comment) {
        // 只允许删除自己评论
        if (comment.username === this.commentForm.username) {
          request
              .delete(`/comments/${commentId}`)
              .then(() => {
                this.$message.success("评论删除成功");
                this.load(); // 重新加载评论列表
              })
              .catch((error) => {
                console.error("删除评论失败:", error);
                this.$message.error("删除评论失败");
              });
        } else {
          this.$message.error("您没有权限删除此评论");
        }
      } else {
        this.$message.error("评论未找到");
      }
    },
    load() {
      request
          .get("/comments/" + this.pageId)
          .then((res) => {
            this.comments = res.data;
          })
          .catch((error) => {
            console.error("加载评论失败:", error);
          });
    },
    comment() {
      this.errorMessage = "";
      if (!this.commentForm.content.trim()) {
        this.errorMessage = "评论不能为空";
        return;
      }
      // 使用自动生成的用户名
      request
          .post("/comments/" + this.pageId, {
            content: this.commentForm.content,
            username: this.commentForm.username,
            userId: this.commentForm.userId,
          })
          .then(() => {
            this.$message.success("评论成功");
            this.commentForm.content = "";
            this.load();
          })
          .catch((error) => {
            console.error("提交评论失败:", error);
            this.$message.error("提交评论失败");
          });
    },
  },
  mounted() {
    this.commentForm.username = this.generateUsername(); // 在 mounted 生命周期钩子中生成用户名
    this.commentForm.userId = this.generateUserId(); // 在 mounted 生命周期钩子中生成用户 ID
    this.load();
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .shibie {
    width: 100%;
    padding: 30px;
    .shibie_title {
      font-size: 36px;
      margin: 0 0 10px 0;
    }
  }
  .shibie_explain {
    margin: 20px 0 0 30px;
  }
  .comments-section {
    padding: 20px;
    height: 400px;
    margin-left: 20px;
    // 评论列表样式
    .comment-item {
      padding: 10px;
      margin-left: 10px;
    }
    .comment-input {
      margin: 15px 0;
    }
    .comment-button {
      width: 80px;
      height: 40px;
      font-size: 18px;
    }
  }
}
</style>;
